<template>
<div class="detail">
    <HeaderDetail><span slot="back" class="back" @click="goback" >返回</span>
    <span slot="home" class="home" @click="gohome">首页</span></HeaderDetail>
    <img :src="detail.coverImg" alt="" width="100%" height="200px">
    <h3>{{detail.name}}</h3>
    <p>价钱：{{detail.price}}</p>
    <button @click="gocart(detail._id)">加入购物车</button>
</div>
</template>
<script>
import HeaderDetail from '../../components/HeaderDetail.vue'
import { reqProductsDetail } from "../../api/reqProducts";
import { reqaddcart } from "../../api/reqaddcart";
export default {
data() {
return {
    detail:{},
};
},
computed: {},
watch: {},
methods: {
    async Detail(id) {
      const result = await reqProductsDetail(id);
      console.log(result);
      this.detail = result;
    },
    goback(){
        this.$router.back();
    },
    gohome(){
        this.$router.push("/home");
    },
    async gocart(id){
        const result = await reqaddcart({
            product: id,
            quantity: 1,
        });
        console.log(result);
        this.$router.push("/cart");
    }
},
created() {
    const id = this.$route.params.id;
    this.Detail(id);
},
mounted() {},
components: {
    HeaderDetail
},
};
</script>
<style scoped>
</style>